import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import action from '../../../store/action'
import { CloseCircleOutline, RightOutline } from 'antd-mobile-icons'

function Gg(props) {
    const [count, setCount] = useState({
        num: 1
    })
    useEffect(() => {

    }, [])
    console.log(props.Xq.item);
    let { item } = props.Xq
    return (
        <div className="Gg">
            <div className="nav">
                <p className="X" onClick={() => {
                    props.close(1)
                }}><CloseCircleOutline fontSize={25} /></p>
                <div className="g_top">
                    <p><img src={item.img} alt="" /></p>
                    <p><span>￥</span>{item.price}</p>
                </div>
                <div className="Pj" onClick={() => {

                }}>
                    <div>
                        <p>评价<span>({item.Pj.length})</span></p>
                        <p>查看全部<RightOutline /></p>
                    </div>
                </div>
                <div className="XuanZe">
                    <p>150g/盒</p>
                </div>
                <div className="Bottom">
                    <div>
                        <p onClick={() => {
                            if (count.num > 1) {
                                count.num--
                                setCount({ ...count, num: count.num })
                            }
                        }}>-</p>
                        <input type="text" value={count.num} onChange={(e) => {
                            setCount({ ...count, num: e.target.value })
                        }} />
                        <p onClick={() => {
                            count.num++
                            setCount({ ...count, num: count.num })
                        }}>+</p>
                    </div>
                    <p><button onClick={() => {
                        let obj = {
                            id: item.id,
                            img: item.img,
                            name: item.name,
                            page: item.page,
                            price: item.price,
                            Js: item.Js,
                            Pj: item.Pj,
                            Xq: item.Xq,
                            isCheck: false,
                            num: count.num
                        }
                        props.addCarData(obj)
                        props.close(1)
                    }}>确认</button></p>
                </div>
            </div>
        </div >
    )
}
export default connect(state => state, action.shop)(Gg)